<template>
    <div class="bodyDiv">
        <!--页面标题-->
        <Header :position="position"></Header>
        <div class="left">
            <el-card>
                <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
                    <span>突变属性</span>
                </div>
                <div style="white-space: nowrap; display: flex">
                    <el-select placeholder="车种" style="margin: 5px"></el-select>
                    <el-select placeholder="车型" style="margin: 5px"></el-select>
                </div>
                <div style="white-space: nowrap;display: flex">
                    <el-select placeholder="车号" style="margin: 5px"></el-select>
                    <el-select placeholder="所属系统" style="margin: 5px"></el-select>
                </div>
                <div style="white-space: nowrap; display: flex">
                    <el-select placeholder="监测点位" style="margin: 5px"></el-select>
                    <el-select placeholder="突变属性" style="margin: 5px"></el-select>
                </div>
                <div style="white-space: nowrap;display: flex">
                    <el-button style="border-radius: 20px; border-color: #ace0f9; width: 200px;margin-left: calc(50% - 100px); margin-top: 10px" >检索车辆</el-button>
                </div>
            </el-card>
            <el-card  style="margin-top: 10px;">
                <h4 style="margin-left: 50px;text-align: left;margin: 0px">最高温度</h4>
                <dashboard style="width: 100%;height: 300px;margin-bottom: -55px; margin-top: -55px"></dashboard>
                <div style="height: 40px"></div>
                <h4 style="margin-left: 50px;text-align: left;margin: 0px">预警数量</h4>
                <annual-pie style="height: 300px;margin-bottom: -25px; margin-top: -30px" :test-data="pieData"></annual-pie>
            </el-card>
        </div>
        <div class="right">
            <el-card style=" width: 100%">
                <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
                    <span>突变属性状态波动</span>
                </div>
                <div id="linehistogram" style="width: 100%;height: 410px; margin-bottom: -40px;margin-top: -10px"></div>
            </el-card>
            <div>
                <el-card style="margin-top: 10px;text-align: left">
                    <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
                        <span>突变预警信息</span>
                    </div>
                    <el-table :data="tableData1" stripe style="margin-top: 10px;overflow-y: auto" height="243px">
                        <el-table-column label="序号" prop="no"></el-table-column>
                        <el-table-column label="车种" prop="class"></el-table-column>
                        <el-table-column label="车型" prop="type"></el-table-column>
                        <el-table-column label="车号" prop="id"></el-table-column>
                        <el-table-column label="所属系统" prop="belong"></el-table-column>
                        <el-table-column label="监测点位" prop="monitor"></el-table-column>
                        <el-table-column label="预警项目" prop="warningItem"></el-table-column>
                        <el-table-column label="预警提示" prop="warningNotice"></el-table-column>
                        <el-table-column label="级别" prop="level"></el-table-column>
                        <el-table-column label="采集参数" prop="parameter"></el-table-column>
                        <el-table-column label="状态" prop="status"></el-table-column>
                        <el-table-column label="预警类型" prop="warningtype"></el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 10px"></el-pagination>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import AnnualPie from "../../components/charts/AnnualPie";
    import Dashboard from "../../components/charts/Dashboard";
    import Header from "../../components/Header";
    import * as echarts from "echarts";
    export default {
        name: "MutationWarning",
        components:{Header, AnnualPie, Dashboard},
        data(){
            return{
                position:{
                    secondTitle:'故障预警' ,
                    thirdTitle:'阈值预警'
                },
                pieData:[
                    {value: 1048, name: '级别一'},
                    {value: 735, name: '级别二'},
                    {value: 94, name: '正常'},
                ],
                tableData1:[
                    {
                        no:'01',
                        class:'货车',
                        type:'BD-35',
                        id:'112568',
                        belong:'结构件',
                        monitor:'桨叶',
                        warningItem:'温度预警',
                        warningNotice:'82>80(OC)',
                        level:'1级',
                        parameter:'63',
                        status:'发生',
                        warningtype:'超温'
                    },{
                        no:'02',
                        class:'货车',
                        type:'HC-11',
                        id:'145623',
                        belong:'风力机',
                        monitor:'桨叶',
                        warningItem:'温度预警',
                        warningNotice:'82>80(OC)',
                        level:'2级',
                        parameter:'82',
                        status:'发生',
                        warningtype:'超温'
                    },{
                        no:'03',
                        class:'货车',
                        type:'VS-23',
                        id:'113565',
                        belong:'传动结构',
                        monitor:'桨叶',
                        warningItem:'温度预警',
                        warningNotice:'82>80(OC)',
                        level:'1级',
                        parameter:'66',
                        status:'发生',
                        warningtype:'超温'
                    },{
                        no:'04',
                        class:'货车',
                        type:'BT-19',
                        id:'156652',
                        belong:'发电机',
                        monitor:'桨叶',
                        warningItem:'温度预警',
                        warningNotice:'82>80(OC)',
                        level:'3级',
                        parameter:'95',
                        status:'发生',
                        warningtype:'超温'
                    },
                ]
            }
        },
        mounted() {
            this.initLinehistogram();
        },
        methods:{
            initLinehistogram(){
                this.options = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['加速度', '速度', '震动', '电流', ' 电压'],
                        orient:'horizontal',
                        x:'center',
                        y:'top',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '温度',
                            // min: 0,
                            // max: 250,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} ℃'
                            }
                        },
                    ],
                    series: [
                        {
                            name: '加速度',
                            type: 'line',
                            // color: '#d0021b',
                            data: [22, 75, 164, 225, 290, 176, 149, 101, 32, 45, 15, 72],
                        },
                        {
                            name: '速度',
                            type: 'line',
                            // color: '#00474f',
                            data: [22, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2],
                        },
                        {
                            name: '震动',
                            type: 'line',
                            // color: '#d0021b',
                            data: [6, 20, 31, 45, 63, 102, 20, 23, 23, 16, 12, 6],
                        },
                        {
                            name: '电流',
                            type: 'line',
                            // color: '#00474f',
                            data: [11, 23, 46, 225, 74, 34, 98, 244, 43,200, 245, 188],
                        },
                        {
                            name: '电压',
                            type: 'line',
                            // color: '#d0021b',
                            data: [49, 71, 65, 147, 278, 34, 21, 47, 251, 32, 47, 75],
                        },
                    ]
                };
                let mychart = echarts.init(document.getElementById('linehistogram'));
                mychart.setOption(this.options)
            }
        }
    }
</script>

<style scoped>
    .bodyDiv{
        display: flex;
    }
    .left{
        width: 30%;
    }
    .right{
        margin-left: 10px;
        width: 70%;
    }
</style>
